<div id="page-body">
  <p>
    The picker uses the following css classes to style the picker.
  </p>
  <div class='row'>
    <h2 id='widget'>widget <a class='anchor-link ' aria-label='Anchor' href='#widget'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The outer element for the widget.
    </p>
  </div>

  <div class='row'>
    <h2 id='calendarHeader'>calendarHeader <a class='anchor-link ' aria-label='Anchor' href='#calendarHeader'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The element for the calendar view header, next and previous actions.
    </p>
  </div>

  <div class='row'>
    <h2 id='switch'>switch <a class='anchor-link ' aria-label='Anchor' href='#switch'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The element for the action to change the calendar view. E.g. month -> year.
    </p>
  </div>

  <div class='row'>
    <h2 id='toolbar'>switch <a class='anchor-link ' aria-label='Anchor' href='#toolbar'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The elements for all the toolbar options.
    </p>
  </div>

  <div class='row'>
    <h2 id='noHighlight'>switch <a class='anchor-link ' aria-label='Anchor' href='#noHighlight'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Disables the hover and rounding affect.
    </p>
  </div>

  <div class='row'>
    <h2 id='sideBySide'>sideBySide <a class='anchor-link ' aria-label='Anchor' href='#sideBySide'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied to the widget element when the side by side option is in use.
    </p>
  </div>

  <div class='row'>
    <h2 id='previous'>previous <a class='anchor-link ' aria-label='Anchor' href='#previous'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The element for the action to change the calendar view, e.g. August -> July
    </p>
  </div>

  <div class='row'>
    <h2 id='next'>next <a class='anchor-link ' aria-label='Anchor' href='#next'><i class='fa-solid fa-anchor'
                                                                                   aria-hidden='true'></i></a></h2>
    <p>
      The element for the action to change the calendar view, e.g. August -> September
    </p>
  </div>

  <div class='row'>
    <h2 id='disabled'>disabled <a class='anchor-link ' aria-label='Anchor' href='#disabled'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied to any action that would violate any restriction options. ALso applied to an input field if the disabled
      function is called.
    </p>
  </div>

  <div class='row'>
    <h2 id='old'>old <a class='anchor-link ' aria-label='Anchor' href='#old'><i class='fa-solid fa-anchor'
                                                                                aria-hidden='true'></i></a></h2>
    <p>
      Applied to any date that is less than requested view, e.g. the last day of the previous month.
    </p>
  </div>

  <div class='row'>
    <h2 id='new'>new <a class='anchor-link ' aria-label='Anchor' href='#new'><i class='fa-solid fa-anchor'
                                                                                aria-hidden='true'></i></a></h2>
    <p>
      Applied to any date that is greater than of requested view, e.g. the last day of the previous month.
    </p>
  </div>

  <div class='row'>
    <h2 id='active'>active <a class='anchor-link ' aria-label='Anchor' href='#active'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied to any date that is currently selected.
    </p>
  </div>

  <div class='row'>
    <h2 id='dateContainer'>dateContainer <a class='anchor-link ' aria-label='Anchor' href='#dateContainer'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The outer element for the calendar view.
    </p>
  </div>

  <div class='row'>
    <h2 id='decadesContainer'>decadesContainer <a class='anchor-link ' aria-label='Anchor' href='#decadesContainer'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The outer element for the decades view.
    </p>
  </div>

  <div class='row'>
    <h2 id='decade'>decade <a class='anchor-link ' aria-label='Anchor' href='#decade'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied to elements within the decades container, e.g. 2020, 2030
    </p>
  </div>

  <div class='row'>
    <h2 id='yearsContainer'>yearsContainer <a class='anchor-link ' aria-label='Anchor' href='#yearsContainer'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The outer element for the years view.
    </p>
  </div>

  <div class='row'>
    <h2 id='year'>year <a class='anchor-link ' aria-label='Anchor' href='#year'><i class='fa-solid fa-anchor'
                                                                                   aria-hidden='true'></i></a></h2>
    <p>
      Applied to elements within the years container, e.g. 2021, 2021
    </p>
  </div>

  <div class='row'>
    <h2 id='monthsContainer'>monthsContainer <a class='anchor-link ' aria-label='Anchor' href='#monthsContainer'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The outer element for the month view.
    </p>
  </div>

  <div class='row'>
    <h2 id='month'>month <a class='anchor-link ' aria-label='Anchor' href='#month'><i class='fa-solid fa-anchor'
                                                                                      aria-hidden='true'></i></a>
    </h2>
    <p>
      Applied to elements within the month container, e.g. January, February
    </p>
  </div>

  <div class='row'>
    <h2 id='daysContainer'>daysContainer <a class='anchor-link ' aria-label='Anchor' href='#daysContainer'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The outer element for the calendar view.
    </p>
  </div>

  <div class='row'>
    <h2 id='day'>day <a class='anchor-link ' aria-label='Anchor' href='#day'><i class='fa-solid fa-anchor'
                                                                                aria-hidden='true'></i></a></h2>
    <p>
      Applied to elements within the day container, e.g. 1, 2..31
    </p>
  </div>

  <div class='row'>
    <h2 id='calendarWeeks'>calendarWeeks <a class='anchor-link ' aria-label='Anchor' href='#calendarWeeks'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      If display.calendarWeeks is enabled, a column displaying the week of year is shown. This class is applied to each
      cell in that column.
    </p>
  </div>

  <div class='row'>
    <h2 id='dayOfTheWeek'>dayOfTheWeek <a class='anchor-link ' aria-label='Anchor' href='#dayOfTheWeek'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied to the first row of the calendar view, e.g. Sunday, Monday
    </p>
  </div>

  <div class='row'>
    <h2 id='today'>today <a class='anchor-link ' aria-label='Anchor' href='#today'><i class='fa-solid fa-anchor'
                                                                                      aria-hidden='true'></i></a>
    </h2>
    <p>
      Applied to the current date on the calendar view.
    </p>
  </div>

  <div class='row'>
    <h2 id='weekend'>weekend <a class='anchor-link ' aria-label='Anchor' href='#weekend'><i class='fa-solid fa-anchor'
                                                                                            aria-hidden='true'></i></a>
    </h2>
    <p>
      Applied to the locale's weekend dates on the calendar view, e.g. Sunday, Saturday
    </p>
  </div>

  <div class='row'>
    <h2 id='timeContainer'>timeContainer <a class='anchor-link ' aria-label='Anchor' href='#timeContainer'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The outer element for all time related elements.
    </p>
  </div>

  <div class='row'>
    <h2 id='separator'>separator <a class='anchor-link ' aria-label='Anchor' href='#separator'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied the separator columns between time elements, e.g. hour *:* minute *:* second
    </p>
  </div>

  <div class='row'>
    <h2 id='clockContainer'>clockContainer <a class='anchor-link ' aria-label='Anchor' href='#clockContainer'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The outer element for the clock view.
    </p>
  </div>

  <div class='row'>
    <h2 id='hourContainer'>hourContainer <a class='anchor-link ' aria-label='Anchor' href='#hourContainer'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The outer element for the hours selection view.
    </p>
  </div>

  <div class='row'>
    <h2 id='minuteContainer'>minuteContainer <a class='anchor-link ' aria-label='Anchor' href='#minuteContainer'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The outer element for the minutes selection view.
    </p>
  </div>

  <div class='row'>
    <h2 id='secondContainer'>secondContainer <a class='anchor-link ' aria-label='Anchor' href='#secondContainer'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      The outer element for the seconds selection view.
    </p>
  </div>

  <div class='row'>
    <h2 id='hour'>hour <a class='anchor-link ' aria-label='Anchor' href='#hour'><i class='fa-solid fa-anchor'
                                                                                   aria-hidden='true'></i></a></h2>
    <p>
      Applied to each element in the hours selection view.
    </p>
  </div>

  <div class='row'>
    <h2 id='minute'>minute <a class='anchor-link ' aria-label='Anchor' href='#minute'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied to each element in the minutes selection view.
    </p>
  </div>

  <div class='row'>
    <h2 id='second'>second <a class='anchor-link ' aria-label='Anchor' href='#second'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied to each element in the seconds selection view.
    </p>
  </div>

  <div class='row'>
    <h2 id='toggleMeridiem'>second <a class='anchor-link ' aria-label='Anchor' href='#toggleMeridiem'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied AM/PM toggle button.
    </p>
  </div>

  <div class='row'>
    <h2 id='show'>show <a class='anchor-link ' aria-label='Anchor' href='#show'><i class='fa-solid fa-anchor'
                                                                                   aria-hidden='true'></i></a></h2>
    <p>
      Applied the element of the current view mode, e.g. calendar or clock.
    </p>
  </div>

  <div class='row'>
    <h2 id='collapsing'>collapsing <a class='anchor-link ' aria-label='Anchor' href='#collapsing'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied to the currently showing view mode during a transition between calendar and clock views
    </p>
  </div>

  <div class='row'>
    <h2 id='collapse'>collapse <a class='anchor-link ' aria-label='Anchor' href='#collapse'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied to the currently hidden view mode.
    </p>
  </div>

  <div class='row'>
    <h2 id='inline'>inline <a class='anchor-link ' aria-label='Anchor' href='#inline'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied to the widget when the option display.inline is enabled.
    </p>
  </div>

  <div class='row'>
    <h2 id='lightTheme'>lightTheme <a class='anchor-link ' aria-label='Anchor' href='#lightTheme'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied to the widget when the option display.theme is light.
    </p>
  </div>

  <div class='row'>
    <h2 id='darkTheme'>darkTheme <a class='anchor-link ' aria-label='Anchor' href='#darkTheme'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Applied to the widget when the option display.theme is dark.
    </p>
  </div>

  <div class='row'>
    <h2 id='isDarkPreferredQuery'>isDarkPreferredQuery <a class='anchor-link ' aria-label='Anchor'
                                                        href='#isDarkPreferredQuery'><i
      class='fa-solid fa-anchor' aria-hidden='true'></i></a></h2>
    <p>
      Used for detecting if the system color preference is dark mode.
    </p>
  </div>

  <div id='subToc' class='d-none'>
    <nav id='TableOfContents'>
      <ul>
        <li><a href='#widget'>Widget</a></li>
        <li><a href='#calendarHeader'>Calendar Header</a></li>
        <li><a href='#switch'>Switch</a></li>
        <li><a href='#toolbar'>Toolbar</a></li>
        <li><a href='#noHighlight'>No Highlight</a></li>
        <li><a href='#sideBySide'>Side By Side</a></li>
        <li><a href='#previous'>Previous</a></li>
        <li><a href='#next'>Next</a></li>
        <li><a href='#disabled'>Disabled</a></li>
        <li><a href='#old'>Old</a></li>
        <li><a href='#new'>New</a></li>
        <li><a href='#active'>Active</a></li>
        <li><a href='#dateContainer'>Date Container</a></li>
        <li><a href='#decadesContainer'>Decades Container</a></li>
        <li><a href='#decade'>Decade</a></li>
        <li><a href='#yearsContainer'>Years Container</a></li>
        <li><a href='#year'>Year</a></li>
        <li><a href='#monthsContainer'>Months Container</a></li>
        <li><a href='#month'>Month</a></li>
        <li><a href='#daysContainer'>Days Container</a></li>
        <li><a href='#day'>Day</a></li>
        <li><a href='#calendarWeeks'>Calendar Weeks</a></li>
        <li><a href='#dayOfTheWeek'>Day Of The Week</a></li>
        <li><a href='#today'>Today</a></li>
        <li><a href='#weekend'>Weekend</a></li>
        <li><a href='#timeContainer'>Time Container</a></li>
        <li><a href='#separator'>Separator</a></li>
        <li><a href='#clockContainer'>Clock Container</a></li>
        <li><a href='#hourContainer'>Hour Container</a></li>
        <li><a href='#minuteContainer'>Minute Container</a></li>
        <li><a href='#secondContainer'>Second Container</a></li>
        <li><a href='#hour'>Hour</a></li>
        <li><a href='#minute'>Minute</a></li>
        <li><a href='#second'>Second</a></li>
        <li><a href='#toggleMeridiem'>Toggle Meridiem</a></li>
        <li><a href='#show'>Show</a></li>
        <li><a href='#collapsing'>Collapsing</a></li>
        <li><a href='#collapse'>Collapse</a></li>
        <li><a href='#inline'>Inline</a></li>
        <li><a href='#lightTheme'>Light Theme</a></li>
        <li><a href='#darkTheme'>Dark Theme</a></li>
        <li><a href='#isDarkPreferredQuery'>Is Dark Preferred Query</a></li>
      </ul>
    </nav>
  </div>

</div>

<div id="page-meta">
  <div id="title">CSS Classes</div>
  <div id="post-date">07/08/2021</div>
  <div id="update-date">07/08/2021</div>
  <div id="excerpt">A break down of the CSS classes in Tempus Dominus.</div>
  <div id="tags">datepicker, javascript, open source, tempus dominus, eonasdan</div>
</div>
